<template>
  <div class="login">
    <section class="login-box animated flipInY rotate-diagonal-2">
      <!-- 左侧 -->
      <div class="login-left">
        <img class="login-img" src="@/assets/svgs/login-img.svg" />
      </div>
      <!-- 右侧 -->
      <div class="login-right">
        <el-form ref="formRef" :model="loginCl.login" :rules="loginCl.rules" class="ruleForm" label-width="60px" status-icon>
          <div class="tital">配件管理系统</div>
          <el-form-item prop="loginName">
            <el-input v-model="loginCl.login.loginName" autocomplete="off" placeholder="账号" type="text" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginCl.login.password" autocomplete="off" placeholder="密码" type="password" />
          </el-form-item>
          <el-form-item>
            <span class="remberText"> <el-checkbox v-model="loginCl.login.rememberMe" /> 记住我</span>
            <span class="forgetPs" @click="forgetPwd">忘记密码？</span>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 100%" type="primary" @click="submitForm(formRef)">登录 </el-button>
          </el-form-item>
        </el-form>
      </div>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { initLoginData } from '@/page/types/admin/login'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { tokenStore } from '@/store/token'
import { ref } from 'vue'

const loginCl = reactive(new initLoginData())
const formRef = ref<FormInstance>()
const router = useRouter()
const submitForm = (loginFormData: FormInstance | undefined) => {
  const counterStore = tokenStore()
  if (!loginFormData) return
  loginFormData.validate((validate: boolean) => {
    if (validate) {
      counterStore.setToken(loginCl.login).then(() => {
        if (loginCl.login.rememberMe) {
          localStorage.setItem('rememberMe', JSON.stringify(loginCl.login))
        } else {
          localStorage.removeItem('rememberMe')
        }
        if (counterStore.token) {
          ElMessage({
            message: '登录成功',
            type: 'success'
          })
          router.push({ path: '/home' })
        }
      })
      return true
    } else {
      return false
    }
  })
}
const forgetPwd = () => {
  console.log('忘记密码')
}
onMounted(() => {
  if (localStorage.getItem('rememberMe')) {
    const data = JSON.parse(String(localStorage.getItem('rememberMe')))
    loginCl.login.loginName = data.loginName
    loginCl.login.password = data.password
    loginCl.login.rememberMe = data.rememberMe
  }
})
</script>

<style lang="scss" scoped>
.register-btn .register-btn:hover {
  color: var(--color-text-2);
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('@/assets/static/login.png') no-repeat center center;
  background-size: 100% 100%; /* 让背景图基于容器大小伸缩 */
  background-attachment: fixed;
  min-height: 100vh;
  &-box {
    width: 720px;
    height: 380px;
    display: flex;
    z-index: 999;
    box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08);
    background-color: #ffff;
    opacity: 0.9;
  }
}

.tital {
  text-align: center;
  margin-left: 20px;
  padding: 20px;
  font: 1em sans-serif;
  font-size: 22px;
  background-image: linear-gradient(to right, orange, purple);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-left {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  opacity: 1;
  background: linear-gradient(60deg, rgb(var(--primary-6)), rgb(var(--primary-3)));

  .login-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: all 0.3s;
    object-fit: cover;
  }
}

.login-right {
  width: 270px;
  height: 100%;
  background: var(--color-bg-1);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
  box-sizing: border-box;
}

.rotate-diagonal-2 {
  -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes rotate-diagonal-2 {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
}

@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
}

.remberText {
  font-size: 10px;
}

.forgetPs {
  font-size: 10px;
  position: absolute;
  cursor: pointer;
  right: 0%;

  a {
    text-decoration: none;
    color: black;
  }
}
.el-select {
  width: 200px;
}
</style>
